<!--
 * Copyright (c) 2017-2021 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
 * which is available at https://www.apache.org/licenses/LICENSE-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
-->

<div class="bootstrap-vertical-nav" id="paletteBody"
     [ngClass]="{'paletteBodyOpenZindex':paletteRootState === 'extended'}"
     [style.width.px]="paletteButtonRootState === 'top' ? toggleButton.offsetWidth : toggleButton.offsetHeight"
     [style.paddingTop.px]="this.top">

    <button [@paletteButtonState]="paletteButtonRootState" id="palette_root" class="btn btn-primary" type="button"
            (click)="toggleRootState()"
            #toggleButton>
        <div *ngIf="paletteRootState === 'shrunk'">Open Palette</div>
        <div *ngIf="paletteRootState === 'extended'">Hide Palette</div>
    </button>

    <div [@paletteItemState]="paletteRootState" class="palette-items-wrapper">
        <accordion [closeOthers]="oneAtATime">
            <accordion-group [isOpen]="i === 0" heading="{{ns?.text}}" panelClass="panel-info"
                             *ngFor="let ns of entityTypes.groupedNodeTypes; let i = index;">
                <ul class="palette-ul">
                    <li *ngFor="let child of ns.children" class="nav-item">
                        <div class="btn btn-light btn-sm btn-block"
                             (mousedown)="generateNewNodeFromMouseEvent($event, child)">
                            <img *ngIf="getImageUrl(child)" [src]="getImageUrl(child)" class="nodeTypeIcon"/>
                            {{ child.text }}
                        </div>
                    </li>
                </ul>
            </accordion-group>
        </accordion>
    </div>
</div>

